import React, { useState } from "react";
import { View, Text } from "react-native";
import { useTheme } from "@/contexts/ThemeContext";
import { Switch } from "react-native-paper";
import { Divider } from "@rneui/themed";
import { createStyles } from "./index.style";

interface SessionSettingItemProps {
  title: string;
  description?: string;
  value: boolean;
  onValueChange: (value: boolean) => void;
}

const SessionSettingItem = ({
  title,
  description,
  value,
  onValueChange,
}: SessionSettingItemProps) => {
  const { colors } = useTheme();
  const styles = createStyles(colors);

  return (
    <>
      <View style={styles.itemContainer}>
        <View style={styles.leftContainer}>
          <Text style={styles.itemTitle}>{title}</Text>
          {description && <Text style={styles.description}>{description}</Text>}
        </View>
        <Switch
          value={value}
          onValueChange={onValueChange}
          color={colors.primary}
        />
      </View>
      <Divider style={{ backgroundColor: "#E1E8ED" }} />
    </>
  );
};

const GroupSessionSetting = () => {
  const { colors } = useTheme();
  const styles = createStyles(colors);

  // 内部状态
  const [isPinned, setIsPinned] = useState(false);
  const [isHidden, setIsHidden] = useState(false);
  const [isMuted, setIsMuted] = useState(true);

  const handlePinnedChange = (value: boolean) => {
    setIsPinned(value);
    console.log("isPinned changed:", value);
    // 处理置顶会话变更逻辑
  };

  const handleHiddenChange = (value: boolean) => {
    setIsHidden(value);
    console.log("isHidden changed:", value);
    // 处理隐藏会话变更逻辑
  };

  const handleMutedChange = (value: boolean) => {
    setIsMuted(value);
    console.log("isMuted changed:", value);
    // 处理消息免打扰变更逻辑
  };

  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.title}>聊天会话设置</Text>
      </View>

      <SessionSettingItem
        title="置顶会话"
        description="将此会话置顶显示在会话列表"
        value={isPinned}
        onValueChange={handlePinnedChange}
      />

      <SessionSettingItem
        title="消息免打扰"
        description="关闭此会话的通知提醒"
        value={isMuted}
        onValueChange={handleMutedChange}
      />
    </View>
  );
};

export default GroupSessionSetting;
